<template>
  <div  v-on:mouseover="stop()" v-on:mouseout="move()" class="focus"  v-cloak><!-- v-cloak定义包含全部切换内容的标签放置闪烁 -->
    <transition-group  name="image" class="focusUl">
      <!--杂 transition 支持过渡的 标签中 :key="index" 会出现警告 需要使用自己明确的属性-->
      <li v-for="(banner,index) in banners" v-show="index===num" :key="banner.cmid">
        <!-- tag属性可以将router-link指定为其他标签,如图：改为div标签 -->
        <!-- <router-link to="" tag="div">-->
        <!--<router-link :to="{path:ad.href}">-->
          <img :src="getImgUrl(banner.cmval)" alt="banner.cmname">
        <!--</router-link>-->
      </li>
    </transition-group>
    <div class="focusSpans">
      <!-- stylet 编写v-cloak 解决谷歌等浏览器 切换闪烁，原因JavaScript去操作DOM，都会等待DOM加载完成（DOM ready）。对于vuejs、angularjs这些会在DOM ready完会才回去解析html view Template 如果内容只是文本 或者使用v-text 代替{{}}} 因为渲染文本和添加节点2个操作顺序
       v-cloak指令和css规则如[v-cloak]{display:none}一起用时，这个指令可以隐藏未编译的Mustache标签直到实例准备完毕。
    v-cloak 指令可以像css选择器一样绑定一套css样式然后这套css会一直生效到实例编译结束。-->
      <span v-for="(span,index) in spans" class="navspan" @mouseenter="change(index)" :class="{'active':index==num}" v-text="span"></span>
    </div>
  </div>
</template>

<script>
  import api from '../../../../../axios/api.js'
    export default {
      name: "Banner",
      data(){//凡是在模板中需要使用的变量都需要在data中定义
         return { banners:[],
           spans:[],
           num:0
         }
      },
      methods:{
        setDataFromAxios: function() {
          api.setDataFromAxios('/banners', null,'post')//自行封装的axios方法 post get参数需要与mock.js中 参数匹配
            .then(dto => {
              console.log(dto);
              this.banners = dto.tList;
              this.spans = new Array();
              for (var i=0;i<this.banners.length;i++){
                this.spans.push((i+1));
              }
            });
        },
       getImgUrl:function(imgsrc){
          return require("../../../../../static/images/banner/"+imgsrc);
        },

        play(){
          this.time=setInterval(()=>{
            this.num++;
            if(this.num==3){
              this.num=0
            }

          },2000)
        },
        change(i){
          this.num=i
        },
        stop(){
          clearInterval(this.time)
        },
        move(){
          this.play();
        }
      },
      created(){
        this.setDataFromAxios();//组件创建的时候 调用 自定义的 赋值方法
        this.play();
      }
    }
</script>

<style lang="stylus">
  [v-cloak] {
    display: none!important;
  }
  .focus
    margin 0 auto;
    margin-top 50px;
    width 1280px;
    height 420px
    position relative
    &:after
      display block
      content ''
      clear both
    .focusUl
      margin 0
      padding 0
      li
       list-style-type none;
       width 1280px
       height 420px
       position absolute
       top 0
       left 0
       img
        width 1280px
        height 420px
     .focusSpans
         position absolute
         bottom 10px
         right 10px
         width 800px
    .navspan
        display inline-block
        width 20px;
        height 20px;
        background-color white
        opacity 0.6
        border-radius 10px;
        color white
        margin-right 10px;
</style>
